<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <title>Document</title>
    <script>
        // window.onload=function(){
        //     console.log(0);
        // }
            // //  三中简写
            // //one
            //     $(document).ready(function(){
            //     })
            // //two
            //     $().ready(function(){

            //     })
            // //there
            //     $(function(){

            //     })

        //alert();
        //window.alert();

        // function a(){

        // }

        // console.log(window);

        // js=>jq
        // jq(对象)=$(js对象/dom)
        // jq=$(div)
        // jq=$("<li>列表</li>")

        // jq=>js
        // [0]
        // js=jq[0]
        // js=$div[0]

         $(function(){
            // var div=document.querySelector(".div");
            // var $div=$(div);
            // var $div= $(".div");
            // var $div=$(":first");
            // $div.click(function(){

            // }) 
        //基本筛选器
        // $("li:first")
        // $("li:eq(0)").css("color","red");
        // $("li:gt(2)").css("color","green");
        // $("li:lt(2)").css("color","yellow");

        //  $("li:empty").css("color","red"); //不显示
        // $("li:parent").css("color","red");//显示红
        // $("li:has(.span)").css("color","red");//显示红 检查选择器
        // $("li:countains(999)").css("color","red");//文本


        })
    </script>
</head>
<body>
    <!-- <div class="div">
    </div> -->
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4<span class="span">999</span></li>
        <li>列表5</li>
        <li></li>
    </ul>
</body>
</html>